import { useState } from 'react'
import { Calendar, Clock, Users, MapPin, FileText, Tag, Plus, X, Video, Mic, Save, ArrowLeft } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import './MeetingCreate.css'

const MeetingCreate = () => {
  const navigate = useNavigate()
  const [formData, setFormData] = useState({
    title: '',
    date: '',
    startTime: '',
    endTime: '',
    location: '',
    description: '',
    participants: [],
    tags: [],
    recordAudio: true,
    recordVideo: false,
    autoTranscribe: true
  })

  const [participantInput, setParticipantInput] = useState('')
  const [tagInput, setTagInput] = useState('')

  const handleInputChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }))
  }

  const addParticipant = () => {
    if (participantInput.trim() && !formData.participants.includes(participantInput.trim())) {
      setFormData(prev => ({
        ...prev,
        participants: [...prev.participants, participantInput.trim()]
      }))
      setParticipantInput('')
    }
  }

  const removeParticipant = (participant) => {
    setFormData(prev => ({
      ...prev,
      participants: prev.participants.filter(p => p !== participant)
    }))
  }

  const addTag = () => {
    if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
      setFormData(prev => ({
        ...prev,
        tags: [...prev.tags, tagInput.trim()]
      }))
      setTagInput('')
    }
  }

  const removeTag = (tag) => {
    setFormData(prev => ({
      ...prev,
      tags: prev.tags.filter(t => t !== tag)
    }))
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log('Meeting created:', formData)
    // Navigate to meeting record page
    navigate('/meeting/record/new')
  }

  const handleStartNow = () => {
    console.log('Starting meeting immediately:', formData)
    navigate('/meeting/record/new')
  }

  return (
    <div className="meeting-create">
      <div className="meeting-create-header">
        <button className="back-btn" onClick={() => navigate(-1)}>
          <ArrowLeft size={24} />
        </button>
        <div className="header-content">
          <h1>新建会议</h1>
          <p>创建并配置您的会议信息</p>
        </div>
      </div>

      <form className="meeting-form" onSubmit={handleSubmit}>
        <div className="form-grid">
          {/* Left Column */}
          <div className="form-column">
            {/* Basic Information */}
            <div className="form-section">
              <h2 className="section-title">基本信息</h2>
              
              <div className="form-group">
                <label className="form-label">
                  <FileText size={20} />
                  会议主题
                </label>
                <input
                  type="text"
                  className="form-input"
                  placeholder="请输入会议主题"
                  value={formData.title}
                  onChange={(e) => handleInputChange('title', e.target.value)}
                  required
                />
              </div>

              <div className="form-row">
                <div className="form-group">
                  <label className="form-label">
                    <Calendar size={20} />
                    会议日期
                  </label>
                  <input
                    type="date"
                    className="form-input"
                    value={formData.date}
                    onChange={(e) => handleInputChange('date', e.target.value)}
                    required
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">
                    <Clock size={20} />
                    开始时间
                  </label>
                  <input
                    type="time"
                    className="form-input"
                    value={formData.startTime}
                    onChange={(e) => handleInputChange('startTime', e.target.value)}
                    required
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">
                    <Clock size={20} />
                    结束时间
                  </label>
                  <input
                    type="time"
                    className="form-input"
                    value={formData.endTime}
                    onChange={(e) => handleInputChange('endTime', e.target.value)}
                    required
                  />
                </div>
              </div>

              <div className="form-group">
                <label className="form-label">
                  <MapPin size={20} />
                  会议地点
                </label>
                <input
                  type="text"
                  className="form-input"
                  placeholder="请输入会议地点或线上会议链接"
                  value={formData.location}
                  onChange={(e) => handleInputChange('location', e.target.value)}
                />
              </div>

              <div className="form-group">
                <label className="form-label">
                  <FileText size={20} />
                  会议描述
                </label>
                <textarea
                  className="form-textarea"
                  placeholder="请输入会议描述、议程等信息"
                  rows="4"
                  value={formData.description}
                  onChange={(e) => handleInputChange('description', e.target.value)}
                />
              </div>
            </div>

            {/* Participants */}
            <div className="form-section">
              <h2 className="section-title">参会人员</h2>
              
              <div className="form-group">
                <label className="form-label">
                  <Users size={20} />
                  添加参会人员
                </label>
                <div className="input-with-button">
                  <input
                    type="text"
                    className="form-input"
                    placeholder="输入姓名或邮箱"
                    value={participantInput}
                    onChange={(e) => setParticipantInput(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && (e.preventDefault(), addParticipant())}
                  />
                  <button type="button" className="add-btn" onClick={addParticipant}>
                    <Plus size={20} />
                  </button>
                </div>
              </div>

              {formData.participants.length > 0 && (
                <div className="chips-container">
                  {formData.participants.map((participant, index) => (
                    <div key={index} className="chip">
                      <Users size={16} />
                      <span>{participant}</span>
                      <button type="button" onClick={() => removeParticipant(participant)}>
                        <X size={16} />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* Right Column */}
          <div className="form-column">
            {/* Recording Settings */}
            <div className="form-section">
              <h2 className="section-title">录制设置</h2>
              
              <div className="settings-list">
                <div className="setting-item">
                  <div className="setting-info">
                    <div className="setting-icon">
                      <Mic size={24} />
                    </div>
                    <div className="setting-text">
                      <h3>音频录制</h3>
                      <p>录制会议音频内容</p>
                    </div>
                  </div>
                  <label className="toggle-switch">
                    <input
                      type="checkbox"
                      checked={formData.recordAudio}
                      onChange={(e) => handleInputChange('recordAudio', e.target.checked)}
                    />
                    <span className="toggle-slider"></span>
                  </label>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <div className="setting-icon">
                      <Video size={24} />
                    </div>
                    <div className="setting-text">
                      <h3>视频录制</h3>
                      <p>录制会议视频画面</p>
                    </div>
                  </div>
                  <label className="toggle-switch">
                    <input
                      type="checkbox"
                      checked={formData.recordVideo}
                      onChange={(e) => handleInputChange('recordVideo', e.target.checked)}
                    />
                    <span className="toggle-slider"></span>
                  </label>
                </div>

                <div className="setting-item">
                  <div className="setting-info">
                    <div className="setting-icon">
                      <FileText size={24} />
                    </div>
                    <div className="setting-text">
                      <h3>自动转写</h3>
                      <p>自动将语音转换为文字</p>
                    </div>
                  </div>
                  <label className="toggle-switch">
                    <input
                      type="checkbox"
                      checked={formData.autoTranscribe}
                      onChange={(e) => handleInputChange('autoTranscribe', e.target.checked)}
                    />
                    <span className="toggle-slider"></span>
                  </label>
                </div>
              </div>
            </div>

            {/* Tags */}
            <div className="form-section">
              <h2 className="section-title">标签分类</h2>
              
              <div className="form-group">
                <label className="form-label">
                  <Tag size={20} />
                  添加标签
                </label>
                <div className="input-with-button">
                  <input
                    type="text"
                    className="form-input"
                    placeholder="输入标签名称"
                    value={tagInput}
                    onChange={(e) => setTagInput(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && (e.preventDefault(), addTag())}
                  />
                  <button type="button" className="add-btn" onClick={addTag}>
                    <Plus size={20} />
                  </button>
                </div>
              </div>

              {formData.tags.length > 0 && (
                <div className="chips-container">
                  {formData.tags.map((tag, index) => (
                    <div key={index} className="chip tag-chip">
                      <Tag size={16} />
                      <span>{tag}</span>
                      <button type="button" onClick={() => removeTag(tag)}>
                        <X size={16} />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Action Buttons */}
        <div className="form-actions">
          <button type="button" className="btn btn-secondary" onClick={() => navigate(-1)}>
            取消
          </button>
          <button type="submit" className="btn btn-primary">
            <Save size={20} />
            保存会议
          </button>
          <button type="button" className="btn btn-success" onClick={handleStartNow}>
            <Video size={20} />
            立即开始
          </button>
        </div>
      </form>
    </div>
  )
}

export default MeetingCreate

